<template>
	<view class="login_content">
		<view class="logo">
			<image src="@/static/imge/logo.jpg" mode=""></image>
		</view>
		<view class="login_form">
			<view class="login_form_row">
				<view class="iconfont iconshoujihaoma">

				</view>
				<input class="login_form_rowinput" type="text" v-model="username" maxlength="11"
					placeholder="请输入您的手机号" />
			</view>
			<view class="login_form_row" style="border: none;">
				<view class="iconfont iconmima">

				</view>
				<input class="login_form_rowinput"  :password="passwordyus" v-model="pwd"
					placeholder="请输入密码" /> 
				<view class="iconfont" style="margin: 0;padding: 15upx;font-size: 42upx;" :class="passwordyus?'iconyanjing_yincang_o':'iconyanjing_xianshi_o'" @click="showClick()">

				</view>
			</view>
		</view>

		<view class="mask" @click="checkeds">
			<view class="iconxuanzhong iconfont" v-if="checked" style="color: #3478f6;">

			</view>
			<view class="iconxuanze-weixuanze iconfont" v-if="!checked">

			</view>
			我已阅读并同意该<text style="color: #3478f6;" @click.stop="tiaozhuan()">《用户注册及使用小程序隐私协议》</text>
		</view>
		<view class="bnts" @click="defaultHandler()">
			登录
		</view>
		<view class="bnts" v-if="!checked" @click="denglus()" style="background-color:#83ca3d ;">
			<view class="iconfont iconweixin" style="font-size:50upx;margin-right: 10upx;">

			</view>一键注册/登录
		</view>
		<button style="background-color:#83ca3d ;" class="bnts" v-if="checked" open-type="getPhoneNumber"
			@getphonenumber="getPhoneNumber">
			<view class="iconfont iconweixin" style="font-size:50upx;margin-right: 10upx;">

			</view>一键注册/登录
		</button>
		<view class="login_zcmm">
			<view class="login_zcmm-x" @click="toRegister()">
				点击注册
			</view>
			<view class="login_zcmm-y" @click="passwordss()">
				找回密码
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data: function() {
			return {
				passwordyus: true,
				checked: false,
				username: '',
				pwd: '',
			}
		},
		onLoad() {

		},
		onShow(options) {
			//小程序用这个
			let that = this
			uni.getStorage({
				key: 'loginA',
				success: function(res) {
					if (res.data) {
						let obj = JSON.parse(res.data)
						that.username = obj.loginName
						that.pwd = obj.password
					}
				},
				fail() {}
			});
		},
		methods: {
			...mapMutations(['getData']),
			showClick(){
				this.passwordyus = !this.passwordyus
			},
			checkeds() {
				this.checked = !this.checked
			},
			toRegister() {
				uni.navigateTo({
					url: '/pagesB/Register/Register'
				});
			},
			passwordss() {
				uni.navigateTo({
					url: '/pagesB/ResetPassWords/ResetPassWords'
				});
			},
			tiaozhuan() {
				uni.navigateTo({
					url: '/pagesB/UserAgreement/UserAgreement'
				});
			},
			denglus() {
				if (!this.checked) {
					uni.showToast({
						title: '请勾选同意用户协议',
						icon: "none",
						duration: 3000
					})
					return false
				}
			},
			getPhoneNumber: function(e) {
				let that = this;
				if (e.detail.code != undefined) {
					uni.login({
						success: (res) => {
							let objP = {
								code: res.code,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv
							}
							const obj = {
								url: 'app/user/loginByPhone',
								data: objP,
								success(res) {
									var data = res.datas
									uni.setStorage({
										key: 'userJson',
										data: JSON.stringify(data),
										success: function() {
											console.log('userJson');
										}
									});
									uni.setStorage({
										key: 'token',
										data: data.token,
										success: function() {
											console.log('token');
										}
									});
									uni.setStorage({
										key: 'userId',
										data: data.id,
										success: function() {
											console.log('userId');
										}
									});
									uni.navigateBack({
										success: () => {
											let page = getCurrentPages().pop();
											if (page) {
												page.onLoad(page.options); //执行上个页面的方法
											};
										}
									})
								},
								fail(res) {
									uni.showToast({
										title: res.msg,
										duration: 3000,
										icon: 'none'
									});
								},
								complete(res) {}
							}
							that.getData(obj)
						}
					})
				}
			},
			defaultHandler() {
				var that = this
				if (this.username == '') {
					uni.showToast({
						title: '请输入您的手机号',
						icon: "none",
						duration: 3000
					})
					return false
				}

				if (this.pwd == '') {
					uni.showToast({
						title: '请输入密码',
						icon: "none",
						duration: 3000
					})
					return false

				}
				if (!this.checked) {
					uni.showToast({
						title: '请勾选同意用户协议',
						icon: "none",
						duration: 3000
					})
					return false

				}
				let objP = {
					loginName: this.username,
					password: this.pwd
				}
				const obj = {
					url: 'app/user/login',
					data: objP,
					success(res) {
						var data = res.datas
						uni.setStorage({
							key: 'userJson',
							data: JSON.stringify(data),
							success: function() {
								console.log('userJson');
							}
						});
						uni.setStorage({
							key: 'token',
							data: data.token,
							success: function() {
								console.log('token');
							}
						});
						uni.setStorage({
							key: 'userId',
							data: data.id,
							success: function() {
								console.log('userId');
							}
						});
						uni.setStorage({
							key: 'loginA',
							data: JSON.stringify(objP),
							success: function() {
								console.log('loginA');
							}
						});
						uni.navigateBack({
							success: () => {
								let page = getCurrentPages().pop();
								if (page) {
									page.onLoad(page.options); //执行上个页面的方法
								};
							}
						})
					},
					fail(res) {
						uni.showToast({
							title: res.msg,
							duration: 3000,
							icon: 'none'
						});
					},
					complete(res) {
						console.log(res)
					}
				}
				this.getData(obj)
			}
		},
	}
</script>

<style lang="scss" scoped>
	button {
		margin: 0;
		padding: 0;
		border-radius: 0;
		border: none;
		background-color: transparent;
	}

	button::after {
		border: none;
	}

	.login_content {
		flex: 1;
		justify-content: center;
		align-items: center;
		background: #fff;
		height: 100%;
	}

	.login_content {
		.logo {
			text-align: center;
			padding-top: 100upx;

			image {
				width: 280upx;
				height: 193upx;
			}
		}
	}

	.login_form {
		background-color: #f7f7f7;
		margin: 0 60upx;
		padding: 0 30upx;
		border-radius: 24upx;
		margin-top: 100upx;

		.login_form_row {
			display: flex;
			align-items: center;
			height: 100upx;
			border-bottom: 2upx solid #ebebeb;

			.iconfont {
				font-size: 42upx;
				padding-right: 25upx;
			}

			.login_form_rowinput {
				flex: 1;
				height: 100%;
				font-size: 30upx;
			}
		}
	}

	.login_zcmm {
		display: flex;
		margin: 0 60upx;
		padding: 0 30upx;
		align-items: center;
		color: #555;
		font-size: 28upx;
		margin-top: 15upx;

		.login_zcmm-x {
			flex: 1;
			padding-top: 20upx;
		}

		.login_zcmm-y {
			flex: 1;
			text-align: right;
			padding: 20upx 0;
		}
	}

	.mask {
		width: 100%;
		font-size: 26upx;
		color: #646464;
		margin-top: 90upx;
		padding: 10upx 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.iconfont {
			padding-right: 4upx;
			font-size: 36upx;
		}

	}

	.bnts {
		height: 90upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 50upx;
		background-color: #3478f6;
		border-radius: 45upx;
		color: #fff;
		margin-top: 30upx;
		font-size: 32upx;
	}
</style>